<template>
    <div class="assemblyMonitoring" :style="{transform:'scale('+scaleNum+')','transform-origin':'0px 0px'}">
        <div class="title">
            <div class="logo"></div>
            <div class="content">
                <span class="shu">丨</span>
                <span>赣州格力生产监控管理</span>
            </div>
            <div class="timer">
                <span>{{time}}</span>
            </div>
        </div>
        <div class="content">
            <div class="smallBox">
                <div class="boxtitle">
                    <span>各线体单小时目标值/产量</span>
                    <div class="titleImg">
                        <img width="30px" src="~images/bigScreen/assemblyMonitoring/yeildOne.png" alt />
                        <span>目标值</span>
                        <img width="30px" src="~images/bigScreen/assemblyMonitoring/yeildTwo.png" alt />
                        <span>实际产量</span>
                        <img width="30px" src="~images/bigScreen/assemblyMonitoring/yeildThree.png" alt />
                        <span>完成率</span>
                    </div>
                </div>
                <div class="echartBox" id="singleHourYeild">

                </div>
            </div>
            <div class="centerBox">
                <div class="topImg">
                    <div class="singleImg"><span>{{yeildArr[0]}}</span></div>
                    <div class="singleImg"><span>{{yeildArr[1]}}</span></div>
                    <div class="singleImg"><span>{{yeildArr[2]}}</span></div>
                    <div class="singleImg"><span>{{yeildArr[3]}}</span></div>
                    <div class="singleImg"><span>{{yeildArr[4]}}</span></div>
                </div>
                <div class="tai"><span>台</span></div>
                <div class="bottomImg">
                    <span>今日产出</span>
                </div>
            </div>
            <div class="smallBox">
                <div class="boxtitle">
                    <span>班组出勤情况</span>
                    <div class="acctitleImg">
                        <img width="30px" src="~images/bigScreen/assemblyMonitoring/yellowblock.png" alt />
                        <span>应出勤</span>
                        <img width="30px" src="~images/bigScreen/assemblyMonitoring/yeildTwo.png" alt />
                        <span>实际出勤</span>
                        <img width="30px" src="~images/bigScreen/assemblyMonitoring/blueline.png" alt />
                        <span>出勤率</span>
                    </div>
                </div>
                <div class="personNum">
                    <div class="blueNum">
                        <img width="72px" src="~images/bigScreen/assemblyMonitoring/blue.png" alt />
                        <div class="fontNum">
                            <span>今日实际出勤</span>
                            <span class="num">372<span>人</span></span>
                        </div>
                    </div>
                    <div class="yellowNum">
                        <img width="72px" src="~images/bigScreen/assemblyMonitoring/yellow.png" alt />
                        <div class="fontNum">
                            <span>今日应出勤</span>
                            <span class="num">384<span>人</span></span>
                        </div>
                    </div>
                </div>
                <div class="echartBan" id="attendance"></div>
            </div>
            <div class="smallBox">
                <div class="boxtitle">
                    <span>各线体当日计划量/完成量</span>
                    <div class="finishTitleImg">
                        <img width="30px" src="~images/bigScreen/assemblyMonitoring/lightblue.png" alt />
                        <span>计划量</span>
                        <img width="30px" src="~images/bigScreen/assemblyMonitoring/yeildTwo.png" alt />
                        <span>完成量</span>
                        <img width="30px" src="~images/bigScreen/assemblyMonitoring/deepblue.png" alt />
                        <span>完成率</span>
                    </div>
                </div>
                <div class="singDay">
                    <div id="singleDay" class="singDayEchart"></div>
                    <div class="jDiv">
                        <div class="jBox">
                            <div class="jTitle">
                                <span>今日总统计</span>
                            </div>
                            <div class="schedule">
                                <div class="finishSch" style="height:94.5%"></div>
                            </div>
                            <div class="jNum">
                                <span>20000</span>
                                <span>16000</span>
                                <span>12000</span>
                                <span>8000</span>
                                <span>4000</span>
                                <span>0</span>
                            </div>
                            <div class="jTotalNum">
                                <span>17495</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bigBox">
                <div class="boxtitle">
                    <span>各班组日效率</span>
                </div>
                <div class="echartBox">
                    <div class="leftBox">
                        <div class="ball">
                            <span class="num">92.5%</span>
                            <span>今日平均效能</span>
                        </div>
                        <div class="ballTitle">
                            <div class="content">
                                <div>
                                    <img width="30px" src="~images/bigScreen/assemblyMonitoring/lightblue.png" alt />
                                    <span>产能</span>
                                </div>
                                <div>
                                    <img width="30px" src="~images/bigScreen/assemblyMonitoring/blueline.png" alt />
                                    <span>目标效率</span>
                                </div>
                                
                            </div>
                            <div class="content">
                                <div>
                                    <img width="30px" src="~images/bigScreen/assemblyMonitoring/yeildTwo.png" alt />
                                    <span>折合产能</span>
                                </div>
                                <div>
                                    <img width="30px" src="~images/bigScreen/assemblyMonitoring/yellowline.png" alt />
                                    <span>班组日效率</span>
                                </div>
                                
                            </div>
                        </div>  
                        
                    </div>
                    <div class="rightBox" id="classDayRate"></div>
                </div>
            </div>
            <div class="bottomBox">
                <div class="boxtitle">
                    <span>重点物料齐套</span>
                </div>
                <div class="table">
                    <div class="tableImg">
                        <Table stripe :columns="columns1" :data="data1" height="200" disabled-hover id="scollId"></Table>
                    </div>
                    <div class="tableImg">
                        <Table stripe :columns="columns1" :data="data2" height="200" disabled-hover></Table>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="btmSty"><span>锱云（上海）物联网科技有限公司提供技术支持</span></div> -->
        
    </div>
</template>

<script>
import * as echarts from 'echarts';
let moment = window.$this.moment;
export default {
    name: "assemblyMonitoring",
    components: {},
    data(){
        return{
            time: this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
            columns1: [
                {
                    title: '生产订单',
                    key: 'one',
                    align:'center'
                },
                {
                    title: '物料编码',
                    key: 'two',
                    width:'150',
                    align:'center'
                },
                {
                    title: '物料名称',
                    key: 'three',
                    width:'150',
                    align:'center'
                },
                {
                    title: '需求数量',
                    key: 'four',
                    align:'center'
                },
                {
                     title: `${this.$t('spareParts.InventoryQuantity')}`,
                    key: 'five',
                    align:'center'
                },
                {
                    title: '需求时间',
                    key: 'six',
                    width:'150',
                    align:'center'
                },
                {
                    title: '是否齐套',
                    key: 'seven',
                    align:'center',
                    render: (h, params) => {
                        if(params.row.seven=='否'){
                            return h('div', [
                                h('span',{style:{color:"red"}},params.row.seven)
                            ]);
                        }else{
                            return h('div', [
                                h('span',params.row.seven)
                            ]);
                        }
                    }
                }
            ],
            data1: [
                {
                    "one": "BZA000014",
                    "two": "000001060166",
                    "three": "底壳部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "000059060071",
                    "three": "蒸发器组合部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "012043060018",
                    "three": "壁挂板",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "05230014",
                    "three": "压花皮排水管",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "100002070447Z701",
                    "three": "电器盒部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "10542036",
                    "three": "轴套(本色)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "110007060680",
                    "three": "包装泡沫(左)(有下挂)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "110007060681",
                    "three": "包装泡沫(右)(有下挂)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "200003060211T08",
                    "three": "面板(高亮白)(烫金主副商标)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "200004060136",
                    "three": "导风板(高亮白)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "200005060026",
                    "three": "螺钉盖(高亮白)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "200017000001",
                    "three": "连接管压板(银灰色424C)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "200082060082",
                    "three": "电器盒盖(高亮白)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "209172000001",
                    "three": "膨胀管组件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "305001060102",
                    "three": "遥控器 YAP0F20(RS)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "49010051",
                    "three": "电池 7# R03P 1.5V",
                    "four": "400",
                    "five": "400",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "500003060046",
                    "three": "包装防踩板",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "500004061165",
                    "three": "包装箱(电挂内)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "550120513",
                    "three": "室内机包装胶袋",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "5501250201",
                    "three": "包装胶袋(说明书)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "000002060269",
                    "three": "面板体部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "600001075715",
                    "three": "型号标记 KFR-35G(35530)FNhAk-B",
                    "four": "400",
                    "five": "400",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "600003060002",
                    "three": "条形码(二维码)50X55mm",
                    "four": "800",
                    "five": "800",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "600004073373",
                    "three": "铭牌 KFR-35G(35530)FNhAk-B3",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "55110014",
                    "three": "封箱胶纸(带格力商标)(W60mmXL10",
                    "four": "424",
                    "five": "424",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "55110039",
                    "three": "封箱胶纸(带格力商标)(W60mmXL90",
                    "four": "166",
                    "five": "166",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "55110050",
                    "three": "胶粘带(米黄色)(30X0.07)",
                    "four": "190",
                    "five": "190",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "55110056",
                    "three": "封箱胶纸(透明)(W36mmXL90m)",
                    "four": "160",
                    "five": "160",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "55110060",
                    "three": "打包带 18.0X0.6(白色)",
                    "four": "516",
                    "five": "516",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "70140681",
                    "three": "螺钉组合件 M4X8(带平垫圈 外齿",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000014",
                    "two": "600007066597",
                    "three": "线路图",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 9:00",
                    "seven": "是"
                }
                
            ],
            data2: [
                {
                    "one": "BZA000015",
                    "two": "000003060444Z7",
                    "three": "面板部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "000046060112",
                    "three": "电机支架部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "000081060167Z701",
                    "three": "右侧板部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "000097060345",
                    "three": "顶盖部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "009001060658",
                    "three": "压缩机及其配件 QXF-A103zC170A",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "012051061152",
                    "three": "隔板1",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "012055060342P",
                    "three": "左侧板(杏灰)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "017080060184P",
                    "three": "底盘组件(杏灰色)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "02143024",
                    "three": "感温包夹",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "100002072617",
                    "three": "电器盒部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "10333428",
                    "three": "轴流风叶(本色)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "110007060559",
                    "three": "包装泡沫(顶)(有下挂)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "110007060572",
                    "three": "包装泡沫(一体化)(有下挂)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "1211255002",
                    "three": "绒布",
                    "four": "400",
                    "five": "400",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "1211309601",
                    "three": "海绵",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "1212309101",
                    "three": "海绵(冷凝器)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "121250681",
                    "three": "海绵",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "200087060004",
                    "three": "阀门盖(杏灰9082C)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "200136000001",
                    "three": "过线圈(白色)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "20014906001701",
                    "three": "提手(右)(杏灰9082C)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "2421304201",
                    "three": "感温包支架(黑色)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "26113009",
                    "three": "排水接头(室外机)(杏灰9082C)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "3900030808",
                    "three": "感温包 20KT/15KS/50KT-JST-XARP",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "000026060027",
                    "three": "阀门支架部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "030152060660Z7",
                    "three": "四通阀部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "55110002",
                    "three": "保温带(包扎带)(14000X50X0.2mm)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "039003060013",
                    "three": "连接管组件(3mXφ6)(可燃冷媒)(安",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "039003060064",
                    "three": "连接管组件 3mXφ9",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "011002061575",
                    "three": "冷凝器部件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "030006061006",
                    "three": "毛细管组件",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                },
                {
                    "one": "BZA000015",
                    "two": "7631300612",
                    "three": "减振阻尼块 120X120X3(2.58)",
                    "four": "200",
                    "five": "200",
                    "six": "6/26/22 8:00",
                    "seven": "是"
                }
                
            ],
            scrollTimer: null, // 滚动定时器
            pauseTimer: null, // 暂停定时器
            scrollTimer1: null, // 滚动定时器
            pauseTimer1: null, // 暂停定时器
            scaleNum:1,
            yeildNum:0,
            yeildArr:[]
        }
    },
    mounted(){
        this.timer1 = setInterval(this.refreshTime, 1000);
        this.singleYeildChart()
        this.attendanceChart()
        this.singleDayChart()
        this.classDayRateEchart()
        this.onresize()
        window.addEventListener('resize', this.onresize, false);
        setTimeout(() => {
            this.autoScroll()
            this.autoScroll1()
        }, 2000);
        // let hour = new Date().getHours()
        // let minute = new Date().getMinutes()
        // let sec = new Date().getSeconds()
        // if(hour>=9){
        //     this.yeildNum = (((hour-9)*3600+minute*60+sec)/20).toFixed(0)
        // }else{
        //     this.yeildNum = 0
        // }
        this.timer3 = setInterval(this.numChange, 20000);
        this.yeildArr = this.padding1(this.yeildNum,5).toString().split("")
    },
    destroyed() {
        // 清理定时器
        clearTimeout(this.pauseTimer)
        this.pauseTimer = null
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
        clearTimeout(this.pauseTimer1)
        this.pauseTimer1 = null
        clearInterval(this.scrollTimer1)
        this.scrollTimer1 = null
        // 清理点击监听
        window.document.removeEventListener('click', this.pauseScroll)
        window.document.removeEventListener('click', this.pauseScroll1)
        window.removeEventListener('resize', this.onresize, false);
    },
    methods:{
        numChange(){
            // if(new Date().getHours()<9){
            //     this.yeildNum = 0
            //     this.yeildArr = this.padding1(this.yeildNum,5).toString().split("")
            //     return
            // }
            this.yeildNum = this.yeildNum*1+1
            this.yeildArr = this.padding1(this.yeildNum,5).toString().split("")
        },
        padding1(num, length) {
            for(let len = (num + "").length; len < length; len = num.length) {
                num = "0" + num;
            }
            return num;
        },
        onresize(){
            const Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            const Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
            const scaleW = Width < 1920 ? (Width /  1920) : 1;
            const scaleH = Height < 1080 ? (Height / 1080) : 1;
            this.scaleNum = scaleW > scaleH ? scaleH : scaleW
        },
        autoScroll() {
            const scrollHeight = document.getElementsByClassName('ivu-table-body')[0].scrollHeight
            const clientHeight = document.getElementsByClassName('ivu-table-body')[0].clientHeight
            const scroll = scrollHeight - clientHeight
            // 滚动长度为0
            if (scroll === 0) {
                return
            }
            // 触发滚动方法
            this.scrollFun()
            // 去除点击监听
            window.document.removeEventListener('click', this.pauseScroll)
            // 重设点击监听
            window.document.addEventListener('click', this.pauseScroll, false)
        },
        pauseScroll() {
            // 定时器不为空
            if (this.scrollTimer) {
                // 清除定时器
                clearInterval(this.scrollTimer)
                this.scrollTimer = null
                // 一秒钟后重新开始定时器
                this.pauseTimer = setTimeout(() => {
                    this.scrollFun()
                }, 2000)
            }
        },
        scrollFun() {
            // 如果定时器存在
            if (this.scrollTimer) {
                // 则先清除
                clearInterval(this.scrollTimer)
                this.scrollTimer = null
            }
            this.scrollTimer = setInterval(() => {
                const scrollHeight = document.getElementsByClassName('ivu-table-body')[0].scrollHeight
                const clientHeight = document.getElementsByClassName('ivu-table-body')[0].clientHeight
                const scroll = scrollHeight - clientHeight
                // 获取当前滚动条距离顶部高度
                const scrollTop = document.getElementsByClassName('ivu-table-body')[0].scrollTop
                // 向下滚动
                const temp = scrollTop + parseFloat((1 /  window.devicePixelRatio).toFixed(2) ) + 0.01
                document.getElementsByClassName('ivu-table-body')[0].scrollTop = temp // 滚动
                // 距离顶部高度  大于等于 滚动长度
                if (scroll <= temp) {
                    // 滚动到底部 停止定时器
                    clearInterval(this.scrollTimer)
                    this.scrollTimer = null
                    setTimeout(() => {
                        document.getElementsByClassName('ivu-table-body')[0].scrollTop = 0
                    }, 2000)
                    this.pauseTimer = setTimeout(() => {
                        this.scrollFun()
                    }, 4000)
                }
            }, 100)
        },
        autoScroll1() {
            const scrollHeight = document.getElementsByClassName('ivu-table-body')[1].scrollHeight
            const clientHeight = document.getElementsByClassName('ivu-table-body')[1].clientHeight
            const scroll = scrollHeight - clientHeight
            // 滚动长度为0
            if (scroll === 0) {
                return
            }
            // 触发滚动方法
            this.scrollFun1()
            // 去除点击监听
            window.document.removeEventListener('click', this.pauseScroll1)
            // 重设点击监听
            window.document.addEventListener('click', this.pauseScroll1, false)
        },
        pauseScroll1() {
            // 定时器不为空
            if (this.scrollTimer1) {
                // 清除定时器
                clearInterval(this.scrollTimer1)
                this.scrollTimer1 = null
                // 一秒钟后重新开始定时器
                this.pauseTimer1 = setTimeout(() => {
                    this.scrollFun1()
                }, 2000)
            }
        },
        scrollFun1() {
            // 如果定时器存在
            if (this.scrollTimer1) {
                // 则先清除
                clearInterval(this.scrollTimer1)
                this.scrollTimer1 = null
            }
            this.scrollTimer1 = setInterval(() => {
                const scrollHeight = document.getElementsByClassName('ivu-table-body')[1].scrollHeight
                const clientHeight = document.getElementsByClassName('ivu-table-body')[1].clientHeight
                const scroll = scrollHeight - clientHeight
                // 获取当前滚动条距离顶部高度
                const scrollTop = document.getElementsByClassName('ivu-table-body')[1].scrollTop
                // 向下滚动
                const temp = scrollTop + parseFloat((1 /  window.devicePixelRatio).toFixed(2) ) + 0.01
                document.getElementsByClassName('ivu-table-body')[1].scrollTop = temp // 滚动
                // 距离顶部高度  大于等于 滚动长度
                if (scroll <= temp) {
                    // 滚动到底部 停止定时器
                    clearInterval(this.scrollTimer1)
                    this.scrollTimer1 = null
                    setTimeout(() => {
                        document.getElementsByClassName('ivu-table-body')[1].scrollTop = 0
                    }, 2000)
                    this.pauseTimer1 = setTimeout(() => {
                        this.scrollFun1()
                    }, 4000)
                }
            }, 100)
        },
        refreshTime(){
            this.time = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
        },
        singleYeildChart() {
            let myChart = echarts.init(document.getElementById("singleHourYeild"));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                color:['rgb(252,99,3)'],
                grid: {
                    left: '8%',
                    right: '8%',
                    bottom: '10%',
                    top: '5%',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    data: ['1N1', '1N2', '1N3', '1W1', '1W2', '1W3'],
                    axisTick: { //y轴刻度线
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color:"rgb(202, 202, 202)"
                    },
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    axisTick: { //y轴刻度线
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value}',
                        color:"rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: 'dashed',
                        }
                    }
                    },
                    {
                    type: 'value',
                    min: 0,
                    // max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value}%',
                        color:"rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color:'rgb(33,62,136)'
                        }
                    }
                    }
                ],
                series: [
                    {
                    name: '目标值',
                    type: "pictorialBar",
                    barWidth: "1%",
                    symbolOffset: [0, 2],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(5,184,253,1)' },
                        { offset: 0.5, color: 'rgba(5,184,253,0.5)' },
                        { offset: 1, color: 'rgba(5,184,253,0)' }
                        ])
                    },
                    symbolRepeat: true,
                    symbolSize: [8, 8],
                    data: [327, 336, 327, 236, 218, 236]
                    },
                    {
                    name: '目标值',
                    type: "pictorialBar",
                    barWidth: "1%",
                    symbolOffset: [10, 2],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(5,184,253,1)' },
                        { offset: 0.5, color: 'rgba(5,184,253,0.5)' },
                        { offset: 1, color: 'rgba(5,184,253,0)' }
                        ])
                    },
                    symbolRepeat: true,
                    symbolSize: [8, 8],
                    tooltip: {
                        show: false,
                    },
                    data: [327, 336, 327, 236, 218, 236]
                    },
                    {
                    name: '目标值',
                    type: "pictorialBar",
                    barWidth: "1%",
                    symbolOffset: [-10, 2],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(5,184,253,1)' },
                        { offset: 0.5, color: 'rgba(5,184,253,0.5)' },
                        { offset: 1, color: 'rgba(5,184,253,0)' }
                        ])
                    },
                    symbolRepeat: true,
                    symbolSize: [8, 8],
                    tooltip: {
                        show: false,
                    },
                    data: [327, 336, 327, 236, 218, 236]
                    },{
                    name: '实际产量',
                    type: 'bar',
                    barWidth: '50%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(5,184,253,1)' },
                            { offset: 0.9, color: 'rgba(5,184,253,0.9)' },
                            { offset: 1, color: 'rgba(5,184,253,0.5)' }
                            ]),
                            label: {
                                formatter: "{c}",
                                show: true,
                                position: "top",
                                textStyle: {
                                    fontSize: "12",
                                    color: "#fff"
                                }
                            }
                        },
                        
                    },
                    data: [300, 350, 310, 210, 230, 215]
                    },
                    {
                    name: '完成率',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + '%';
                        }
                    },
                    data: [92,104,95,89,105,91]
                    }
                ]
                
            });
            window.addEventListener("resize", function () {
                myChart.resize(); //myChart指自己定义的echartsDom对象
            });
        },
        attendanceChart() {
            let myChart = echarts.init(document.getElementById("attendance"));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                color:['rgb(252,99,3)'],
                grid: {
                    left: '8%',
                    right: '8%',
                    bottom: '10%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    data: ['1N1', '1N2', '1N3', '1W1', '1W2', '1W3'],
                    axisTick: { //y轴刻度线
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color:"rgb(202, 202, 202)"
                    },
                    },
                    {
                    type: 'category',
                    data: ['1N1', '1N2', '1N3', '1W1', '1W2', '1W3'],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    axisTick: { //y轴刻度线
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value}',
                        color:"rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: 'dashed',
                        }
                    }
                    },
                    {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value}%',
                        color:"rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color:'rgb(33,62,136)'
                        }
                    }
                    }
                ],
                series: [
                    {
                    name: '应出勤',
                    type: 'bar',
                    barWidth: '20%',
                    xAxisIndex: 1,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(225,98,51,1)' },
                        { offset: 0.3, color: 'rgba(225,98,51,0.7)' },
                        { offset: 1, color: 'rgba(225,98,51,0.1)' }
                        ]),
                        barBorderRadius:[10, 10, 0, 0]
                    },
                    data: [56, 51, 60, 72, 75, 70]
                    },{
                    name: '实际出勤',
                    type: 'bar',
                    barWidth: '20%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(5,184,253,1)' },
                            { offset: 0.3, color: 'rgba(5,184,253,0.7)' },
                            { offset: 1, color: 'rgba(5,184,253,0.1)' }
                            ]),
                            barBorderRadius:[10, 10, 0, 0],
                            label: {
                                formatter: "{c}",
                                show: true,
                                position: "top",
                                textStyle: {
                                    fontSize: "12",
                                    color: "#fff"
                                }
                            }
                        },
                    },
                    data: [56, 49, 55, 72, 70, 70]
                    },
                    {
                    name: '出勤率',
                    type: 'line',
                    yAxisIndex: 1,
                    symbolSize: 6,
                    symbol: 'circle', 
                    lineStyle: {
                        color: 'rgb(16,136,182)',
                        type: 'dashed'
                    },
                    itemStyle: {
                        borderColor: 'rgb(225,98,51)',
                        color: 'rgb(225,98,51)'
                    }, 
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + '%';
                        }
                    },
                    data: [100,96,92,100,93,100]
                    }
                ]
                
            });
            window.addEventListener("resize", function () {
                myChart.resize(); //myChart指自己定义的echartsDom对象
            });
        },
        singleDayChart() {
            let myChart = echarts.init(document.getElementById("singleDay"));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                color:['rgb(252,99,3)'],
                grid: {
                    left: '12%',
                    right: '8%',
                    bottom: '5%',
                    top: '1%',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'value',
                    min: 0,
                    // max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value}%',
                        color:"rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color:'rgb(33,62,136)'
                        }
                    }
                    },
                    {
                    type: 'value',
                    axisTick: { //y轴刻度线
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value}',
                        color:"rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: 'dashed',
                        }
                    }
                    },
                    
                ],
                yAxis: [
                    {
                    type: 'category',
                    data: ['1N1', '1N2', '1N3', '1W1', '1W2', '1W3'],
                    axisTick: { //y轴刻度线
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color:"rgb(202, 202, 202)"
                    },
                    },
                    {
                    type: 'category',
                    data: ['1N1', '1N2', '1N3', '1W1', '1W2', '1W3'],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    }
                    
                ],
                series: [
                    {
                    name: '计划量',
                    type: 'bar',
                    barWidth: '20%',
                    yAxisIndex: 1,
                    xAxisIndex:1,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        { offset: 0, color: 'rgba(3,85,149,0.5)' },
                        { offset: 0.5, color: 'rgba(3,85,149,0.3)' },
                        { offset: 1, color: 'rgba(3,85,149,0.1)' }
                        ]),
                        barBorderRadius:[0, 5, 5, 0]
                    },
                    data: [3600, 3700, 3600, 2600, 2400, 2600]
                    },
                    {
                    name: '完成量',
                    type: 'bar',
                    barWidth: '20%',
                    xAxisIndex:1,
                    itemStyle: {
                        
                        normal: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                            { offset: 0, color: 'rgba(36,175,249,1)' },
                            { offset: 0.5, color: 'rgba(36,175,249,0.5)' },
                            { offset: 1, color: 'rgba(36,175,249,0.1)' }
                            ]),
                            barBorderRadius:[0, 5, 5, 0],
                            label: {
                                formatter: "{c}",
                                show: true,
                                position: "right",
                                textStyle: {
                                    fontSize: "12",
                                    color: "#fff"
                                }
                            }
                        },
                    },
                    data: [3305, 3705, 3400, 2310, 2410, 2365]
                    },
                    {
                    name: '完成率',
                    type: 'bar',
                    barWidth: '20%',
                    yAxisIndex: 1,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        { offset: 0, color: 'rgba(32,31,244,1)' },
                        { offset: 0.5, color: 'rgba(32,31,244,0.5)' },
                        { offset: 1, color: 'rgba(32,31,244,0.1)' }
                        ]),
                        barBorderRadius:[0, 5, 5, 0]
                    },
                    tooltip: {
                        show: false,
                    },
                    data: [92, 100, 94, 89, 100, 91]
                    },
                    {
                    name: '完成率',
                    type: 'bar',
                    barWidth: '20%',
                    yAxisIndex: 0,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        { offset: 0, color: 'rgba(32,31,244,1)' },
                        { offset: 0.5, color: 'rgba(32,31,244,0.5)' },
                        { offset: 1, color: 'rgba(32,31,244,0.1)' }
                        ]),
                        barBorderRadius:[0, 5, 5, 0]
                    },
                    data: [92, 100, 94, 89, 100, 91]
                    },

                ]
                
            });
            window.addEventListener("resize", function () {
                myChart.resize(); //myChart指自己定义的echartsDom对象
            });
        },
        classDayRateEchart(){
            let myChart = echarts.init(document.getElementById("classDayRate"));
            let xData2 = ['1N1', '1N2', '1N3', '1W1', '1W2', '1W3'];
            let data1 = [3305,3705,3400,2310,2410,2365];
            let data2 = [2644,2964,2720,1848,1928,1892];
            let data3 = [50,55,50,30,30,30];
            let data4 = [47.2,58.1,45.3,25.7,25.7,27];
            myChart.setOption({
                grid: {
                    left: '1%',
                    right: '6%',
                    bottom: '5%',
                    top: '5%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                xAxis: {
                    data: xData2,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                        },
                        margin: 20, //刻度标签与轴线之间的距离。
                    },
                },
                yAxis: [
                    {
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                        },
                    }
                    },
                    {
                    type: 'value',
                    // min: 0,
                    // max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value}',
                        color:"rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color:'rgb(33,62,136)'
                        }
                    }
                    }
                ],
                series: [
                    {//底座
                        name: "",
                        type: "pictorialBar",
                        symbolSize: ["31%", 15],
                        symbolOffset: ["-75%", 5],
                        z: 12,
                        itemStyle:{
                            opacity:1,
                            color: function(){
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(49,187,234)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color:  'rgb(49,187,234)'// 100% 处的颜色
                                }], false)
                            }
                        },
                        tooltip: {
                            show: false,
                        },
                        data: [0,0,0,0,0,0]
                    },
                    {
                        name: "",//实际头部
                        type: "pictorialBar",
                        symbolSize: ["31%", 15],
                        symbolOffset: ["-75%", -5],
                        z: 12,
                        itemStyle:{
                            opacity:1,
                            color: function(){
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(49,187,234)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color:  'rgb(49,187,234)'// 100% 处的颜色
                                }], false)
                            }
                        },
                        tooltip: {
                            show: false,
                        },
                        symbolPosition: "end",
                        data: data1
                    },
                    //下半截柱状图
                    {
                        name:'产能',
                        type: 'bar',
                        barWidth: '25%',
                        barGap: '0%',
                        itemStyle: {//lenged文本
                            normal: {
                                color: function(){
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(49,187,234)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color:  'rgb(49,187,234)'// 100% 处的颜色
                                    }], false)
                                },
                                opacity:.7,
                                label: {
                                    formatter: "{c}",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        fontSize: "12",
                                        color: "#fff"
                                    }
                                }
                            },
                        },
                        data: data1
                    },
                     {//底座
                        name: "",
                        type: "pictorialBar",
                        symbolSize: ["31%", 15],
                        symbolOffset: ["75%", 5],
                        z: 12,
                        itemStyle:{
                            opacity:1,
                            color: function(){
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(58,79,232)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color:  'rgb(58,79,232)'// 100% 处的颜色
                                }], false)
                            }
                        },
                        tooltip: {
                            show: false,
                        },
                        data: [0,0,0,0,0,0]
                    },
                    {
                        name: "",//实际头部
                        type: "pictorialBar",
                        symbolSize: ["31%", 15],
                        symbolOffset: ["75%", -5],
                        z: 12,
                        itemStyle:{
                            opacity:1,
                            color: function(){
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(58,79,232)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color:  'rgb(58,79,232)'// 100% 处的颜色
                                }], false)
                            }
                        },
                        tooltip: {
                            show: false,
                        },
                        symbolPosition: "end",
                        data: data2
                    },
                    //下半截柱状图
                    {
                        name:'折合产能',
                        type: 'bar',
                        barWidth: '25%',
                        barGap: '50%',
                        itemStyle: {//lenged文本
                            normal: {
                                opacity:.7,
                                color: function(){
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(58,79,232)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color:  'rgb(58,79,232)'// 100% 处的颜色
                                    }], false)
                                },
                                label: {
                                    formatter: "{c}",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        fontSize: "12",
                                        color: "#fff"
                                    }
                                }
                            },
                        },
                        data: data2
                    },
                    {
                    name: '目标效率',
                    type: 'line',
                    yAxisIndex: 1,
                    symbolSize: 6,
                    symbol: 'circle', 
                    lineStyle: {
                        color: 'rgb(15,138,178)',
                        type: 'dashed'
                    },
                    itemStyle: {
                        borderColor: 'rgb(225,98,51)',
                        color: 'rgb(225,98,51)'
                    }, 
                    tooltip: {
                        valueFormatter: function (value) {
                        return value;
                        }
                    },
                    data: data3
                    },
                    {
                    name: '班组日效率',
                    type: 'line',
                    yAxisIndex: 1,
                    symbolSize: 6,
                    symbol: 'circle', 
                    lineStyle: {
                        color: 'rgb(122,168,61)',
                        type: 'dashed'
                    },
                    itemStyle: {
                        borderColor: 'rgb(225,98,51)',
                        color: 'rgb(225,98,51)'
                    }, 
                    tooltip: {
                        valueFormatter: function (value) {
                        return value;
                        }
                    },
                    data: data4
                    }
                ]
            });
            window.addEventListener("resize", function () {
                myChart.resize(); //myChart指自己定义的echartsDom对象
            });
        }
    },
    beforeDestroy() {
        clearInterval(this.timer1);
        clearInterval(this.timer3);
    }
}
</script>

<style scoped lang="scss">
.assemblyMonitoring{
    background: url(~images/bigScreen/assemblyMonitoring/bg.png) no-repeat;
    background-size: cover;
    height: 1080px;
    width: 1920px;
    // position: relative;
    overflow: hidden;

    .title{
        background: url(~images/bigScreen/assemblyMonitoring/header.png) no-repeat;
        background-size: cover;
        height: 96px;
        width: 1802px;
        display:flex;
        justify-content:center;
        margin: 0 auto;
        padding: 12px 0;
        .timer{
            position: absolute;
            right: 59px;
            top: 35px;
            font-size: 20px;
            color: #fff;
            font-family: 'digifacewide';
        }
        .logo{
            background: url(~images/bigScreen/assemblyMonitoring/logo.png) no-repeat;
            background-size: cover;
            width: 159px;
            height: 34px;
            margin-top: 4px;
        }
        .content{
            font-size: 28px;
            font-weight: bold;
            color: #fff;
            .shu{
                font-size: 24px;
                font-weight: 300;
                line-height: 40px;
                margin-right: 10px;
            }
        }
    }
    .content{
        display:flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .smallBox{
            background: url(~images/bigScreen/assemblyMonitoring/smallBox.png) no-repeat;
            background-size: cover;
            width: 570px;
            height: 353px;
            .boxtitle{
                font-size: 16px;
                color: #fff;
                padding: 43px 0 30px 55px;
                display: flex;
                justify-content: space-between;
                .titleImg{
                    display:flex;
                    justify-content:center;
                    align-items: center;
                    margin-right: 45px;
                    font-size: 14px;
                    color: rgb(214, 214, 214);
                    img{
                        margin: 0 5px;
                    }
                }
                .acctitleImg{
                    display:flex;
                    justify-content:center;
                    align-items: center;
                    margin-right: 45px;
                    font-size: 14px;
                    color: rgb(214, 214, 214);
                    img{
                        margin: 0 5px;
                    }

                }
                .finishTitleImg{
                    display:flex;
                    justify-content:center;
                    align-items: center;
                    margin-right: 45px;
                    font-size: 14px;
                    color: rgb(214, 214, 214);
                    img{
                        margin: 0 5px;
                    }
                }
            }
            .echartBox{
                width: 100%;
                height: 220px;
            }
            .personNum{
                display:flex;
                .blueNum{
                    width: 50%;
                    padding: 0 0 0 40px;
                    display:flex;
                    img{
                        margin-right: 20px;
                    }
                    .fontNum{
                        font-size: 16px;
                        color: rgb(192,192,192);
                        display:flex;
                        flex-direction: column;
                        justify-content:space-between;
                        // align-items: center;
                        .num{
                            font-size: 32px;
                            // font-weight: bold;
                            color: rgb(68,189,255);
                            letter-spacing: 6px;
                            font-family: 'longzhoufeng';
                            span{
                                font-size: 16px;
                                color: rgb(192,192,192);
                                
                                
                            }
                        }
                    }
                    
                    
                }
                .yellowNum{
                    width: 50%;
                    display:flex;
                    img{
                        margin-right: 20px;
                    }
                    .fontNum{
                        font-size: 16px;
                        color: rgb(192,192,192);
                        display:flex;
                        flex-direction: column;
                        justify-content:space-between;
                        .num{
                            font-size: 32px;
                            // font-weight: bold;
                            color: rgb(225,94,53);
                            letter-spacing: 6px;
                            font-family: 'longzhoufeng';
                            span{
                                font-size: 16px;
                                color: rgb(192,192,192);
                            }
                        }
                    }
                }
            }
            .echartBan{
                width: 100%;
                height: 155px;
            }
            .singDay{
                width: 100%;
                height: 225px;
                display: flex;
                .singDayEchart{
                    width: 70%;
                    height: 100%
                }
                .jDiv{
                    width: 30%;
                    height: 100%;
                    display: flex;
                    padding-left:10px;
                    padding-bottom: 5px;
                    .jBox{
                        background: url(~images/bigScreen/assemblyMonitoring/jBox.png) no-repeat;
                        background-size: cover;
                        width: 114px;
                        .jTitle{
                            background: url(~images/bigScreen/assemblyMonitoring/todayTotal.png) no-repeat;
                            background-size: cover;
                            width: 28px;
                            height: 100px;
                            position: relative;
                            top: 10px;
                            left: 35px;
                            font-size: 14px;
                            text-align: center;
                            color: #fff;
                            writing-mode:vertical-rl;
                            line-height: 24px;

                        }
                        .schedule{
                            width: 5px;
                            height: 117px;
                            position: relative;
                            top: -99px;
                            left: 73px;
                            .finishSch{
                                width: 100%;
                                height: 50%;
                                background: rgb(33,151,216);
                                position: absolute;
                                bottom: 0%;
                            }
                        }
                        .jNum{
                            width: 38px;
                            height: 137px;
                            position: relative;
                            top: -224px;
                            left: 95px;
                            display:flex;
                            justify-content:center;
                            flex-direction: column;
                            // align-items: center;
                            line-height: 24px;
                            color: rgb(202, 202, 202);
                        }
                        .jTotalNum{
                            position: relative;
                            top: -192px;
                            left: -8px;
                            text-align: center;
                            color: #fff;
                        }
                    }
                }
            }
        }
        .centerBox{
            width: 754px;
            height: 353px;
            display:flex;
            justify-content:center;
            flex-direction: column;
            align-items: center;
            .tai{
                position: absolute;
                color: #fff;
                font-size: 50px;
                right: 622px;
                top: 224px;
            }
            .topImg{
                margin-bottom: 30px;
                width: 578px;
                height: 112px;
                display: flex;
                justify-content:space-around;
                .singleImg{
                    background: url(~images/bigScreen/assemblyMonitoring/singleBox.png) no-repeat;
                    background-size: cover;
                    height: 112px;
                    width: 81px;
                    display:flex;
                    justify-content:center;
                    flex-direction: column;
                    align-items: center;
                    span{
                        font-size: 65px;
                        color: rgb(178,243,253);
                        font-family: 'longzhoufeng';
                    }
                }
            }
            .bottomImg{
                background: url(~images/bigScreen/assemblyMonitoring/yeild.png) no-repeat;
                background-size: cover;
                width: 200px;
                height: 50px;
                display:flex;
                justify-content:center;
                flex-direction: column;
                align-items: center;
                color: rgb(197, 197, 197);
                font-size: 28px;
            }
        }
        .bigBox{
            background: url(~images/bigScreen/assemblyMonitoring/bigBox.png) no-repeat;
            background-size: cover;
            width: 1331px;
            height: 353px;
            .boxtitle{
                font-size: 16px;
                color: #fff;
                padding: 43px 0 30px 55px;
            }
            .echartBox{
                height: 222px;
                width: 100%;
                display: flex;
                .leftBox{
                    height: 100%;
                    width: 20%;
                    padding-left: 40px;
                    display: flex;
                    justify-content:space-around;
                    flex-direction: column;
                    align-items: center;
                    .ball{
                        background: url(~images/bigScreen/assemblyMonitoring/ballBox.png) no-repeat;
                        background-size: cover;
                        width: 153px;
                        height: 153px;
                        display: flex;
                        justify-content:center;
                        flex-direction: column;
                        align-items: center;
                        color: rgb(218, 218, 218);
                        .num{
                            font-size: 20px;
                            color: #fff;
                        }
                    }
                    .ballTitle{
                        display:flex;
                        .content{
                            display:flex;
                            justify-content:space-between;
                            flex-direction: column;
                            padding-left:12px;
                            // align-items: center;
                            font-size: 14px;
                            color: rgb(214, 214, 214);
                            img{
                                margin: 0 5px;
                            }
                        }
                    }
                    
                }
                .rightBox{
                    height: 100%;
                    width: 80%;
                }
            }
        }
        .bottomBox{
            margin-top: 10px;
            background: url(~images/bigScreen/assemblyMonitoring/bottomBox.png) no-repeat;
            background-size: cover;
            width: 1884px;
            height: 249px;
            display: flex;
            .boxtitle{
                font-size: 16px;
                color: #fff;
                writing-mode:vertical-rl;
                line-height: 68px;
                padding-top: 85px;
                width: 3.6%;
            }
            .table{
                height: 100%;
                width: 96.4%;
                display: flex;
                justify-content:space-around;
                align-items: center;
                .tableImg{
                    background: url(~images/bigScreen/assemblyMonitoring/listBox.png) no-repeat;
                    background-size: cover;
                    width: 862px;
                    height: 200px;
                    
                }
                
            }
        }
    }
    .btmSty{
        text-align: center;
        line-height: 20px;
    }
}
</style>
<style scoped lang="scss">
.assemblyMonitoring{
    .ivu-table td{
        height:33px !important;
        color:rgb(202, 202, 202);
        border-bottom: 1px solid rgb(47,84,148);
    }
    .ivu-table th{
        height:32px !important;
        color:rgb(202, 202, 202);
        border-bottom: 1px solid rgb(47,84,148);
    }
    .ivu-table-header thead tr th{
        padding: 4px 0 !important;
    }
    .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td{
        background-color:rgb(15,41,118);
    }
     .ivu-table th{
        background-color:rgb(7,58,164);
     }
    .ivu-table td{
        background-color:rgb(17,47,112);
    }
    .ivu-table-wrapper{
        border: 1px solid rgb(47,84,148);
    }
    .ivu-table-overflowX{
        overflow-x:hidden;
        scrollbar-width: none;
    }
    .ivu-table:before{
        background-color:rgb(47,84,148)
    }
    .ivu-table:after{
        background-color:rgb(7,58,164)
    }
    .ivu-table{
        background-color:rgb(7,58,164);
        
    }
    div::-webkit-scrollbar, dl::-webkit-scrollbar, dt::-webkit-scrollbar, dd::-webkit-scrollbar, ul::-webkit-scrollbar, ol::-webkit-scrollbar, li::-webkit-scrollbar, h1::-webkit-scrollbar, h2::-webkit-scrollbar, h3::-webkit-scrollbar, h4::-webkit-scrollbar, h5::-webkit-scrollbar, h6::-webkit-scrollbar, pre::-webkit-scrollbar, form::-webkit-scrollbar, fieldset::-webkit-scrollbar, input::-webkit-scrollbar, p::-webkit-scrollbar, blockquote::-webkit-scrollbar, th::-webkit-scrollbar, td::-webkit-scrollbar, tr::-webkit-scrollbar, b::-webkit-scrollbar{
        width: 0px;
    }
    .ivu-table table{
        width: 862px !important;
    }
    
}
</style>
